<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样本生成</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Link to external CSS file instead of inline styles -->
    <link href="styles/generation.css" rel="stylesheet">
</head>

<body>
    <!-- Floating background elements -->
    <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
    </div>

    <!-- Header navigation -->
    <nav class="header-nav">
        <div class="nav-container">
            <div class="logo">Y-Squeeze</div>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-link">首页</a></li>
                <li><a href="attention.html" class="nav-link">注意力分析</a></li>
                <li><a href="compression.html" class="nav-link">内容压缩</a></li>
                <li><a href="generation.html" class="nav-link active">样本生成</a></li>
                <li><a href="clustering.html" class="nav-link">聚类筛选</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="main-layout">
            <!-- Main Content -->
            <main class="main-content">
                <div class="module-header">
                    <h1 class="module-title">
                        <i class="fas fa-magic"></i>
                        样本生成
                    </h1>
                    <div style="display: flex; align-items: center; gap: 1rem;">
                        <div class="model-selector">
                            <label for="modelSelect" style="font-size: 0.875rem; color: #6b7280;">模型:</label>
                                                    <select id="modelSelect" class="model-select">
                        </select>
                                                          <div class="model-dropdown" id="modelDropdown">
                                  <div class="model-current">
                                      <i class="fas fa-robot"></i>
                                      <span class="model-name">选择模型</span>
                                      <i class="fas fa-chevron-down caret"></i>
                                  </div>
                                  <div class="model-menu">
                                  </div>
                              </div>
                        </div>
                    </div>
                </div>

                <!-- Parameters Panel -->
                <div class="config-panel">
                    <div class="config-header">
                        <i class="fas fa-sliders-h"></i>
                        参数调整
                        <div class="config-header-buttons">
                            <button class="btn btn-secondary btn-sm" onclick="resetForm()">
                                <i class="fas fa-redo"></i> 重置
                            </button>
                            <button class="btn btn-secondary btn-sm" onclick="generateWithDynamicEntropy()">
                                <i class="fas fa-random"></i> 动态熵温度生成
                            </button>
                            <button class="btn btn-primary btn-sm" onclick="generateSamples()">
                                <i class="fas fa-play"></i> 生成样本
                            </button>
                        </div>
                    </div>
                    <div class="config-content">
                        <div class="params-column">
                            <div class="config-grid">
                                <div class="config-group">
                                    <label class="config-label">生成样本数</label>
                                    <input type="number" class="config-input" id="sampleCount" value="5" min="1">
                                </div>
                                <div class="config-group">
                                    <label class="config-label">模型采样温度</label>
                                    <input type="text" class="config-input" id="temperature" value="0.1">
                                </div>
                                <div class="config-group">
                                    <label class="config-label">模型随机采样 top_k</label>
                                    <input type="text" class="config-input" id="topK" value="0">
                                </div>
                                <div class="config-group">
                                    <label class="config-label">模型核取样 top_p</label>
                                    <input type="text" class="config-input" id="topP" value="1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Input Sections -->
                <div class="io-container">
                    <div class="input-section">
                        <div class="section-header">
                            <i class="fas fa-file-text"></i> 训练语料输入
                            <button class="input-btn" onclick="loadTrainingCorpusSample()">
                                <i class="fas fa-file-import"></i> 示例
                            </button>
                        </div>
                        <div class="section-content">
                            <textarea id="trainingCorpus" class="input-textarea"
                                placeholder="请输入训练语料文本..."></textarea>
                        </div>
                    </div>

                    <div class="input-section">
                        <div class="section-header">
                            <i class="fas fa-edit"></i> 自我评价修复样本提示词
                        </div>
                        <div class="section-content">
                            <textarea id="selfEvaluationPrompt" class="input-textarea"># 你是一个样本挑选助手，我会提供任务背景与在这个任务背景下生成的多组样本，你需要从这些样本中挑选出针对任务背景最有优势的一个样本，同时对选中的优势样本进行错误修复、强化放大优势。

## 任务背景 

{input} 

## 多组样本 

{samples} 

数据最终结果，注意不要说明解释性内容：</textarea>
                        </div>
                    </div>
                </div>

                <!-- Results Section -->
                <div class="results-section">
                    <div class="results-main">
                        <div class="results-header">
                            <div class="results-title">
                                <i class="fas fa-list"></i>
                                样本输出
                            </div>
                            <div class="results-actions">
                                <button class="action-btn" onclick="clearResults()">
                                    <i class="fas fa-trash"></i> 清空
                                </button>
                                <button class="action-btn" onclick="exportResults()">
                                    <i class="fas fa-download"></i> 导出
                                </button>
                                <button class="action-btn" onclick="copyAllResults(this)">
                                    <i class="fas fa-copy"></i> 全部复制
                                </button>
                            </div>
                        </div>
                        <div class="results-content" id="resultsContent">
                            <div class="empty-state">
                                <i class="fas fa-magic"></i>
                                <p>点击"生成样本"按钮开始生成</p>
                            </div>
                        </div>
                    </div>

                    <div class="stats-sidebar">
                        <div class="stats-header">
                            <i class="fas fa-star"></i>
                            优势样本
                        </div>
                        <div class="stats-content" id="advantageSamplesContent">
                            <div class="empty-state">
                                <i class="fas fa-trophy"></i>
                                <p>优势样本将在生成后显示</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Link to external JavaScript file instead of inline script -->
    <script src="scripts/config.js"></script>
    <script src="scripts/generation.js"></script>
</body>

</html>
